<template>
  <div class="requestVacation">
    <v-header :userName='userName'></v-header>
    <section class="tab">

    	<b class="tipA" v-if="numA !== 0">{{numA}}</b>
    	<b class="tipB" v-if="numB !== 0">{{numB}}</b>

      <el-tabs v-model='activeName'>
        <el-tab-pane label="待办" name='a'>
          <v-tab1 ref="TabOne"  @getNum="getNumAppro"></v-tab1>
        </el-tab-pane>
          
        <el-tab-pane label="待 阅" name='d'>
          <v-tab4  ref="TabTwo"  @getLookNum="getNumLook"></v-tab4>
        </el-tab-pane>   
        <el-tab-pane label="我发起" name='c'>
          <v-tab3 v-if='activeName=="c"'></v-tab3>
        </el-tab-pane>          
        <el-tab-pane label="已审批" name='b'>
          <v-tab2 v-if='activeName=="b"'></v-tab2>
        </el-tab-pane>


        <el-tab-pane label="已 阅" name='e'>
          <v-tab5 v-if='activeName=="e"'></v-tab5>
        </el-tab-pane>
<!-- 
         <el-tab-pane label="本部门休假情况" name='f'>
          <v-tab6 v-if='activeName=="f"'></v-tab6>
        </el-tab-pane> -->
        
      </el-tabs>

    </section>


      
    
  </div>
</template>

<script>

import Vue from 'vue'
import { RadioGroup, Radio, DatePicker, TimePicker, Col, Select, Option, Upload, Tabs, TabPane } from 'element-ui'
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(Col)
Vue.use(Select)
Vue.use(Option)
Vue.use(Upload)
Vue.use(Tabs)
Vue.use(TabPane)

import header from '@/components/employee/header'
import tab1 from '@/components/employee/requestVacation/tab1'
import tab2 from '@/components/employee/requestVacation/tab2'
import tab3 from '@/components/employee/requestVacation/tab3'
import tab4 from '@/components/employee/requestVacation/tab4'
import tab5 from '@/components/employee/requestVacation/tab5'
import tab6 from '@/components/employee/requestVacation/tab6'


export default {
  components: {
    "v-header": header,
    "v-tab1": tab1,
    "v-tab2": tab2,
    "v-tab3": tab3,
    "v-tab4": tab4,
    "v-tab5": tab5,
    "v-tab6": tab6,
  },
  data () {
    return {
      activeName: 'a',
      userName:localStorage.getItem('userName'),
      numA:0,
      numB:0,
    }
  },
  mounted () {
    let queryData = this.$route.query

    if (queryData) {
      this.activeName = queryData.activeName
    }
    
    this.$refs.TabOne.sendAjax();
    this.$refs.TabTwo.sendAjax();
    
//  this.numA = localStorage.getItem('numA') - 0;
//		this.numB = localStorage.getItem('numB') - 0;
  },
  watch:{
  		activeName:function(newVal){
        switch(newVal){
            case 'a' : 
                this.$refs.TabOne.sendAjax();
                break;
            case 'd' : 
                  this.$refs.TabTwo.sendAjax();
                  break;
        }
  		}
  },
  methods:{
  	getNumAppro:function(val){
  		this.numA = val;
  	},
  	getNumLook:function(val){
  		this.numB = val;
  	},
  }


}
</script>

<style lang='less'>
.requestVacation {
  // min-height: 100%;
    // height: 100vh;
  .tab {
    // min-height: 100%;
    // // padding-top: 55px;
 
  box-sizing: border-box;
    
	  .tipA{
	    position: fixed;
	    top: 56px;
	    left: 184px;
	    background-color: #E24040;
	    color: #fff;
	    font-size: 12px;
	    font-weight: normal;
	    width: 22px;
	    height: 16px;
	    z-index:1100;
	    text-align: center;
	    border-radius: 50%;
	  }
	  .tipB{
	    position: fixed;
	    top: 56px;
	    left: 250px;
	    background-color: #E24040;
	    color: #fff;
	    font-size: 12px;
	    font-weight: normal;
	    width: 22px;
	    height: 16px;
	    z-index:1100;
	    text-align: center;
	    border-radius: 50%;
	  }    
    .el-tabs__nav-scroll {
      padding-left: 140px;
    }
    
 
    .el-tabs__content {
      overflow: visible;
      background-color: rgb(236, 240, 245); 
    }
    .el-tabs__header {
      margin-bottom: 0;
      border-bottom: none;
      position: fixed;
      top: 50px;
      left: 0;
      z-index: 999;
      background-color: #fff;
      width: 100%;
    }
  }
}

.my-send {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 100px;
  z-index: 99;
  color: #38f;
  font-weight: 700;
}


</style>